/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/no-did-update-set-state */
import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment/moment';
import { Form } from 'antd';
import StatisticalData from './StatisticalData';
import DetailedData from './DetailedData';

const formItemLayout = {
  labelCol: {
    xs: { span: 0 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
@connect(({ loading, list, user, setting }) => ({
  list,
  ...setting,
  userInfo: user.currentUser.user_info,
  stationing: loading.effects['area/subList'],
  dakFansSummaryStat: loading.effects['list/dakFansSummaryStat'],
}))
@Form.create()
export default class Fans extends Component {
  state = {
    points: false,
    canvesList: '',
    dataPoints: null,
    between: '',
    chartType: '',
    title: '公众号粉丝分日数据',
    listType: 'dakFansSummaryStat',
    startDate: moment()
      .startOf('day')
      .subtract(7, 'days'),
    endDate: moment()
      .endOf('day')
      .subtract(1, 'days'),
  };

  componentDidMount = () => {
    this.getList();
  };

  componentDidUpdate(prevProps) {
    const { points } = this.state;
    if (prevProps.area_id !== this.props.area_id && points) {
      this.setState(
        {
          points: false,
        },
        () => {
          this.getList();
        },
      );
    }
  }

  onClickTime = data => {
    const {
      dispatch,
      area_id,
      options: { key },
    } = this.props;
    const reqZoneId = key === 'yz' ? area_id : null;
    this.setState({
      points: true,
      dataPoints: data,
      between: '2',
      chartType: '2',
      title: '公众号粉丝分日数据',
    });
    dispatch({
      type: 'list/dakFansEverydayStat',
      payload: {
        cm_id: data.dak_id,
        start: data.start,
        end: data.end,
        area_id: reqZoneId,
      },
      then: date => {
        this.setState({
          canvesList: date,
        });
      },
    });
  };

  getList = () => {
    const {
      dispatch,
      userInfo,
      options: { key },
      area_id,
    } = this.props;
    const { listType, startDate, endDate } = this.state;
    const { branch = [], branchLevel } = userInfo;
    let ini_branchId;
    let init_branch;
    const isZyAccount = key == 'post';
    const reqZoneId = key === 'yz' ? area_id : null;
    if (branchLevel == 0 && branch.length == 0) {
      init_branch = [
        {
          id: '0',
          name: '中国邮政集团有限公司',
          level: '0',
          pid: '-2', // 自定义pid用来区分是否是单独属于总公司账号
        },
      ];
      ini_branchId = ['0'];
    } else {
      ini_branchId = branch.filter(val => (isZyAccount ? val.level != 0 : val)).map(i => i.id);
      init_branch = branch;
    }
    dispatch({
      type: 'list/setFormValues',
      payload: {
        [`${listType}Date`]: [startDate, endDate],
        [`${listType}SiteId`]: 'all',
        [`${listType}AddressId`]: ini_branchId,
        [`${listType}BrandId`]: 'all',
        listType,
        init_branch,
        area_id: reqZoneId,
      },
    });
    const payload = {
      cm_id: 'all',
      start: startDate.format('YYYY-MM-DD'),
      end: endDate.format('YYYY-MM-DD'),
      page: 1,
      area_id: reqZoneId,
    };
    if (isZyAccount) {
      delete payload.cm_id;
    }
    !isZyAccount &&
      dispatch({
        type: 'list/dakFansSummaryStat',
        payload,
      });
  };

  cancel = mode => {
    this.setState({
      points: mode,
    });
  };

  render() {
    const { points, dataPoints, between, chartType, title, canvesList } = this.state;
    const canvesLists = canvesList || [];
    const {
      stationing,
      stationList,
      operatoring,
      dakFansSummaryStat,
      list,
      piesList,
      area_id,
    } = this.props;
    const { fans_datail, fans, brandList } = list;
    const { pagination } = fans;
    const { all_total } = pagination || {};
    const { all_total_detail } = fans_datail.pagination || {};
    const { new_add, total } = all_total || {};
    const { fans_add, fans_total } = all_total_detail || {};
    const columns = [
      {
        title: '日期',
        dataIndex: 'start',
        render: (current, currentData) => (
          <a onClick={() => this.onClickTime(currentData)}>
            {currentData.start ? currentData.start : currentData.start_date}到{currentData.end}
          </a>
        ),
      },
      {
        title: '驿站名称',
        dataIndex: 'dak_name',
      },
      {
        title: `新增粉丝 ${new_add || 0} 条`,
        dataIndex: 'new_add',
      },
      {
        title: `累计粉丝 ${total || 0} 条`,
        dataIndex: 'total',
      },
    ];
    const column = [
      {
        title: '日期',
        dataIndex: 'date',
      },
      {
        title: '驿站名称',
        dataIndex: 'dak_name',
      },
      {
        title: `新增粉丝 ${fans_add || 0} 条`,
        dataIndex: 'new_add',
      },
      {
        title: `累计粉丝 ${fans_total || 0} 条`,
        dataIndex: 'total',
      },
    ];
    return (
      <div>
        {points ? (
          <DetailedData
            title={title}
            loading={dakFansSummaryStat}
            data={fans_datail}
            canvesList={canvesLists}
            piesList={piesList}
            columns={column}
            dataPoints={dataPoints}
            cancel={mode => this.cancel(mode)}
            between={between}
            chartType={chartType}
            dvs="4"
            listType="dakFansEverydayStat"
          />
        ) : (
          <StatisticalData
            formItemLayout={formItemLayout}
            stationing={stationing}
            stationList={stationList}
            operatoring={operatoring}
            dropList={brandList}
            loading={dakFansSummaryStat}
            data={fans}
            canvesList={canvesLists}
            columns={columns}
            statisticalType="brand"
            listType="dakFansSummaryStat"
            area_id={area_id}
          />
        )}
      </div>
    );
  }
}
